<template>
  <div class="fans">
    <div class="middle">
      <div class="title">
        <span :class="type === 1 ? 'title-active' : ''" @click="changeType(1)"
          >关注</span
        >
        <span :class="type === 2 ? 'title-active' : ''" @click="changeType(2)"
          >粉丝</span
        >
      </div>
      <div class="fans-list">
        <FansItem
          class="fans-item"
          v-for="(item, index) in fansList"
          :key="index"
          :fans="item"
        >
        </FansItem>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import FansItem from "../../components/fans/FansItem.vue";
let fansList = [
  {
    avatar: "",
    name: "名字",
    content: "内容",
    type: 1,
  },
  {
    avatar: "",
    name: "名字",
    content: "内容",
    type: 1,
  },
  {
    avatar: "",
    name: "名字",
    content: "内容",
    type: 1,
  },
];
let type = ref(1);
function changeType(type) {
  console.log(type);
  this.type = type;
}
</script>
<style lang="scss" scoped>
.fans {
  color: #fff;
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  .middle,
  .left,
  .right {
    display: flex;
    flex-direction: column;
  }
  .left,
  .right {
    border-radius: 10px;
    width: 20%;
    background: #fff;
  }
  .left {
    height: 200px;
  }
  .right {
    height: 200px;
  }
  .middle {
    margin: 0 20px;
    width: 50%;
    background: red;
    .title {
      display: flex;
      flex-direction: row;
      justify-content: center;
      margin: 20px 0;
      font-size: 18px;
      span:last-child {
        margin-left: 40px;
      }
      .title-active {
        color: fuchsia;
      }
    }
    .fans-list {
      // background-color: darkorchid;
      margin: 0 10px;
      .fans-item {
        // background-color: blue;
      }
    }
  }
}
</style>
